<%--
    Document   : agregarArea
    Created on : 08/12/2010, 11:22:17 AM
    Author     : andres
--%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<% request.setAttribute("allowed", "Gestionar Sedes, Areas y Edificios");%>
<%@ include file='../Templates/security.jsp' %>

<% //Manejo de Mensajes enviados por metodos GET:

            String msg = request.getParameter("msg");System.out.println(msg);            
%>
<h1 class="title">Gestión de Puestos de Vigilancias</h1>
<hr>
<p class="meta"></p>
<center>
    <h2>Agregar Puesto de Vigilancia</h2>

<% if (msg == null || !msg.equals("ins_err") ) {%>
    <div id="ubicacionUSB" >
        <div id="map_canvas"></div>
        <center>
            <input type="button"  id="guardarUbicacion_btn" value="Guardar Ubicacion"/>
            <script type="text/javascript" src="Modulo2/js/Gmap.js"></script>
            <script type="text/javascript">
                $(function(){
                    initialize('Sartenejas');
                    getUbications();
                });
            </script>
        </center>
    </div>    
<% }else{%>
<script type="text/javascript">
    function guardarUbicacion(){
    $('#ubicacionUSB').css('display', 'none');
    $('.agregar_btn').css('display', 'block');
    $('#formulario').css('display', 'block');
    $('#botonesForm').css('display', 'block');
    return false;
}
guardarUbicacion();
    </script>
<% }%>
    <div id="center" class="formAgregacionPtoVig">


        <!-- Fila de insertar -->
        <html:form action="/PuestoDeVigAgregar" styleId="AgregarPuestoDeVigForm" styleClass="formAgregacion"
                   onsubmit="return sendForm('AgregarPuestoDeVigForm', 'PuestoDeVigAgregar','center');">
            <div id="formulario" style="display: none">
                <table>
                    <tr>
                        <td colspan="4" align="center">
                            <font color="red">
                                <bean:write name="AgregarPuestoDeVigForm" property="error"/>
                                &nbsp;
                            </font>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Nombre del Puesto de Vigilancia:</td>
                        <td><html:text property="puesto" size="20"/></td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Sede:</td>
                        <td>
                            <select id="sedeSelected" name ="nombre_sede" property="nombre_sede" onchange="setOptions(this.value);">
                                <script type="text/javascript">
                                    $.getJSON("listaSedeAction.do",
                                    function(data) {
                                        $.each(data.consultarSede, function(i,item){
                                            var string = "<option value='"+item.nombre+"'>"+item.nombre+"</option>";
                                            $('#sedeSelected').append(string)
                                        });
                                    });
                                </script>
                                <option value="seleccionar">Seleccionar</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Area:</td>
                        <td>
                            <select id="areaSelected" name ="id_area" property="id_area">
                                <script type="text/javascript">
                                    function setOptions(valor){
                                        $.getJSON("listaAreas.do",{nombre_sede: valor},
                                        function(data) {
                                            $('#areaSelected').empty();
                                            $.each(data.consultarArea1, function(i,item){
                                                document.getElementById('areaSelected').disabled = false;
                                                var string = "<option value='"+item.id_area+"'>"+item.descripcion+"</option>";
                                                $('#areaSelected').append(string);
                                            });
                                            if((document.getElementById('areaSelected')).options.length == 0){
                                                var string = "<option value='NA'>No Aplica</option>";
                                                $('#areaSelected').append(string);
                                                document.getElementById('areaSelected').disabled = true;
                                            }
                                        });
                                    }
                                </script>
                                <option value="seleccionar">Seleccionar</option>
                            </select>
                        </td>
                    </tr>
                </table>

            </div>
                    <table>
            <tr>
                <td><font color="red">*&nbsp;</font>Coordenada X:</td><td><html:text property="coordX" size="10" maxlength="10" styleId="coordX" readonly="true"/></td>
            
                <td><font color="red">*&nbsp;</font>Coordenada Y:</td><td><html:text property="coordY" size="10" maxlength="10" styleId="coordY" readonly="true"/></td>
            </tr>
                    </table>
        </html:form>
            <br>
                <font color="red"><p>Los campos que tiene (*) son obligatorios.</p></font>
                <br>
        <table id="formFiles" style="text-align: center;"></table>
        <iframe id="returnMsg" name="returnMsg" src="#"></iframe>
        <div id="botonesForm" title="Crear nueva Puesto" style="display: none">
            <center>
                <br>
                <input type="button" value = "Agregar"  onclick="return sendForm('AgregarPuestoDeVigForm', 'PuestoDeVigAgregar','center');"/>
                <input type="button" id="ubicarUSB_btn" value="Atrás"/>
                <input type="button" value="Limpiar"/>
            </center>
        </div>
    </div>
</center>



